<template>
  <div class="vid-item" @click="handleView">
    <div class="cover">
      <!-- <img :src="item.previewUrl" /> -->
      <video :src="item.url" />
      <div class="camera-name">{{ item.gridName }}</div>
    </div>
    <div class="footer">
      <div class="vid-type">{{ item.videoType }}</div>
      <div class="title">{{ item.videoName }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  item: TypeVidItem
}>()

const emit = defineEmits(['view'])
const handleView = () => {
  emit('view', props.item)
}
</script>

<style lang="less" scoped>
.vid-item {
  border-radius: 5px;
  background: #ffffff;
  box-shadow: 0px 2px 5px 0px #0000000c;
  margin-bottom: 10px;
  overflow: hidden;
  .cover {
    height: 197.5px;
    width: 100%;
    position: relative;
    video {
      width: 100%;
      height: 100%;
    }
    .camera-name {
      position: absolute;
      height: 32px;
      width: 100%;
      padding-left: 10px;
      line-height: 32px;
      bottom: 0;
      color: #fff;
      box-sizing: border-box;
      background: linear-gradient(180deg, #00000000 0%, #000000 100%);
    }
  }

  .footer {
    height: 42.5px;
    display: flex;
    align-items: center;
    padding: 0px 10px;
    .vid-type {
      border-radius: 2.5px;
      background: #3a75c519;
      color: #3a75c5;
      font-weight: bold;
      font-size: 13px;
      margin-right: 6px;
      padding: 3px 9px;
    }
    .title {
      color: #0e0d16;
      font-weight: bold;
      font-size: 14px;
    }
  }
}
</style>
